<template>
  <div class="system-monitor">
    <el-card class="header-card">
      <template #header>
        <div class="card-header">
          <span>服务监控</span>
        </div>
      </template>
      <div class="content">
        <el-tabs v-model="activeTab">
          <el-tab-pane label="服务器监控" name="server">
            <el-row :gutter="20">
              <el-col :span="8">
                <el-card class="monitor-card">
                  <template #header>
                    <div class="card-header">
                      <span>CPU使用率</span>
                    </div>
                  </template>
                  <div class="monitor-content">
                    <div class="progress-container">
                      <el-progress type="circle" :percentage="cpuUsage" :status="cpuUsage > 80 ? 'exception' : 'success'" />
                    </div>
                    <div class="usage-info">
                      <p>当前使用: {{ cpuUsage }}%</p>
                      <p>核心数: {{ cpuCores }}</p>
                    </div>
                  </div>
                </el-card>
              </el-col>
              
              <el-col :span="8">
                <el-card class="monitor-card">
                  <template #header>
                    <div class="card-header">
                      <span>内存使用</span>
                    </div>
                  </template>
                  <div class="monitor-content">
                    <div class="progress-container">
                      <el-progress type="circle" :percentage="memoryUsage" :status="memoryUsage > 85 ? 'exception' : 'success'" />
                    </div>
                    <div class="usage-info">
                      <p>已使用: {{ usedMemory }}GB / {{ totalMemory }}GB</p>
                      <p>使用率: {{ memoryUsage }}%</p>
                    </div>
                  </div>
                </el-card>
              </el-col>
              
              <el-col :span="8">
                <el-card class="monitor-card">
                  <template #header>
                    <div class="card-header">
                      <span>磁盘空间</span>
                    </div>
                  </template>
                  <div class="monitor-content">
                    <div class="progress-container">
                      <el-progress type="circle" :percentage="diskUsage" :status="diskUsage > 90 ? 'exception' : 'success'" />
                    </div>
                    <div class="usage-info">
                      <p>已使用: {{ usedDisk }}GB / {{ totalDisk }}GB</p>
                      <p>使用率: {{ diskUsage }}%</p>
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </el-tab-pane>
          
          <el-tab-pane label="数据库监控" name="database">
            <el-row :gutter="20">
              <el-col :span="6">
                <el-card class="stat-card">
                  <div class="stat-item">
                    <div class="stat-value">{{ dbConnections }}</div>
                    <div class="stat-label">当前连接数</div>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card class="stat-card">
                  <div class="stat-item">
                    <div class="stat-value">{{ dbQueriesPerSecond }}</div>
                    <div class="stat-label">每秒查询数</div>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card class="stat-card">
                  <div class="stat-item">
                    <div class="stat-value">{{ dbSlowQueries }}</div>
                    <div class="stat-label">慢查询数</div>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card class="stat-card">
                  <div class="stat-item">
                    <div class="stat-value">{{ dbUptime }}</div>
                    <div class="stat-label">运行时间</div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
            
            <div class="chart-container" style="margin-top: 20px;">
              <el-card>
                <div ref="dbChartRef" style="width: 100%; height: 300px;"></div>
              </el-card>
            </div>
          </el-tab-pane>
          
          <el-tab-pane label="缓存监控" name="cache">
            <el-row :gutter="20">
              <el-col :span="8">
                <el-card class="cache-card">
                  <template #header>
                    <div class="card-header">
                      <span>Redis缓存</span>
                    </div>
                  </template>
                  <div class="cache-content">
                    <div class="cache-stat">
                      <p>命中率: {{ redisHitRate }}%</p>
                      <el-progress :percentage="redisHitRate" :status="redisHitRate < 90 ? 'exception' : 'success'" />
                    </div>
                    <div class="cache-stat">
                      <p>内存使用: {{ redisMemoryUsage }}MB</p>
                      <p>键数量: {{ redisKeyCount }}</p>
                    </div>
                  </div>
                </el-card>
              </el-col>
              
              <el-col :span="8">
                <el-card class="cache-card">
                  <template #header>
                    <div class="card-header">
                      <span>缓存性能</span>
                    </div>
                  </template>
                  <div class="cache-content">
                    <div class="cache-stat">
                      <p>每秒请求数: {{ cacheRequestsPerSecond }}</p>
                      <p>平均响应时间: {{ cacheAvgResponseTime }}ms</p>
                    </div>
                  </div>
                </el-card>
              </el-col>
              
              <el-col :span="8">
                <el-card class="cache-card">
                  <template #header>
                    <div class="card-header">
                      <span>缓存状态</span>
                    </div>
                  </template>
                  <div class="cache-content">
                    <div class="status-item">
                      <el-tag :type="redisStatus === 'up' ? 'success' : 'danger'">
                        Redis: {{ redisStatus === 'up' ? '正常运行' : '服务中断' }}
                      </el-tag>
                    </div>
                    <div class="status-item">
                      <el-tag :type="memcachedStatus === 'up' ? 'success' : 'danger'">
                        Memcached: {{ memcachedStatus === 'up' ? '正常运行' : '服务中断' }}
                      </el-tag>
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const activeTab = ref('server')

// 服务器监控数据
const cpuUsage = ref(65)
const cpuCores = ref(8)
const memoryUsage = ref(72)
const usedMemory = ref(12.5)
const totalMemory = ref(16)
const diskUsage = ref(45)
const usedDisk = ref(90)
const totalDisk = ref(200)

// 数据库监控数据
const dbConnections = ref(128)
const dbQueriesPerSecond = ref(1250)
const dbSlowQueries = ref(3)
const dbUptime = ref('15天 3小时')
const dbChartRef = ref()

// 缓存监控数据
const redisHitRate = ref(96.5)
const redisMemoryUsage = ref(256)
const redisKeyCount = ref(125000)
const cacheRequestsPerSecond = ref(5800)
const cacheAvgResponseTime = ref(12)
const redisStatus = ref('up')
const memcachedStatus = ref('up')
</script>

<style scoped>
.system-monitor {
  padding: 20px;
}

.header-card {
  margin-bottom: 20px;
}

.card-header {
  font-size: 18px;
  font-weight: bold;
}

.monitor-card,
.cache-card {
  margin-bottom: 20px;
}

.monitor-content,
.cache-content {
  text-align: center;
  padding: 20px 0;
}

.progress-container {
  margin-bottom: 20px;
}

.usage-info p {
  margin: 5px 0;
  color: #666;
}

.stat-card {
  text-align: center;
}

.stat-item {
  padding: 20px 0;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #409eff;
}

.stat-label {
  font-size: 14px;
  color: #666;
  margin-top: 10px;
}

.cache-stat {
  margin-bottom: 20px;
}

.cache-stat p {
  margin: 5px 0;
  color: #666;
}

.status-item {
  margin-bottom: 15px;
}

.chart-container {
  background: #fff;
  padding: 20px;
  border-radius: 4px;
}
</style>